<template>
    <div id="notice">
        <el-tabs v-model="curTab" type="card" @tab-click="onTabClick">
            <el-tab-pane v-for="item in tabList" :label="item.val" :name="item.id" :key="item.id">
                <component v-bind:is="item.curComponent" :initData="item.initData" @switchTabComponent='onSwitchTabComponent'></component>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script>
import noticeList from './notice-list'
import noticeEdit from './notice-edit'
import noticeDetail from './notice-detail'
export default {
    components:{noticeList,noticeEdit,noticeDetail},
    data(){
        return{
            tabList:[],
            curTab:'',
            statusList:[]
        }
    },
    
    methods: {
        getTabs(){
            var submitData={type:'wx-notice'}
            var _this=this
            this.$http.getDictByType(submitData)
            .then((res)=>{
                var data=res.data.data
                if(!data){
                    this.$message.error("数据异常!")
                    return
                }
                data.forEach((item)=>{
                    item.curComponent=noticeList
                    item.initData={}
                })
                
                this.tabList=data
                this.curTab=this.tabList[0].id//默认显示第一个tab
                this.$nextTick(()=>{
                    this.$set(this.tabList[0],'initData',{
                        tabId:this.tabList[0].id,
                        optType:'list',
                        data:this.tabList[0].id,
                        statusList:_this.statusList,
                    })
                })

            }).catch((err)=>{
                throw(err)
            })
        },
        //切换tab
        onTabClick(tab, event) {
            var _this=this
            this.tabList.forEach((item,index)=>{
                item.curComponent=noticeList
                if(item.id===tab.name){
                    this.$nextTick(()=>{
                        this.$set(this.tabList[index],'initData',{
                            tabId:item.id,
                            optType:'list',
                            data:item.id,
                            statusList:_this.statusList,
                        })
                    })
                }
            })
        },
        
        //同一tab内的detail/list/edit切换
        onSwitchTabComponent(initData){
            var _this=this
            this.tabList.forEach((item,index)=>{
                if(item.id===initData.tabId){
                    switch(initData.optType){
                        case 'list':item.curComponent=noticeList;break;
                        case 'edit':item.curComponent=noticeEdit;break;
                        case 'detail':item.curComponent=noticeDetail;break;
                    }
                    this.$nextTick(()=>{
                        item.initData=initData
                        item.initData.statusList=this.statusList
                    })
                }
            })
        },

        
        //查询状态列表
        getStatusList(){
            var statusList=JSON.parse(localStorage.getItem('statusList'))
            this.statusList=statusList.infoStatus

        }

    },
    created(){
        this.getStatusList()
        this.getTabs()
        
    }
}
</script>
<style scoped lang="scss">
#notice{
    height: 100%;
}
#river-introduction{
    height: 100%;
    .aside{
      margin: 10px;
      border: 1px solid #eee;
      border-radius: 10px;
    }
}
</style>
<style scoped lang="scss">
/deep/ .el-tabs{
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .el-tabs__header{
        margin-bottom: 0px;
        .el-tabs__nav{
            width: 100%;
            border: none;
            .el-tabs__item{
                width: 150px;
                text-align:center;
                border-left: none;
                border-right: 1px solid #295B9C;
                &.is-active{
                    border-bottom-color:#0e2443;
                }
            }
        }
    }
    .el-tabs__content{
        flex: 1;
        overflow: hidden;
        .el-tab-pane{
            height: 100%;
        }
    }
}

</style>


